import React, { Component } from 'react'
import { nanoid } from 'nanoid/non-secure'
import { connect } from 'react-redux'
import { addPerson } from '../../redux/actions/person_action'
class Person extends Component {
  addPerson = () => {
    const name = this.nameNode.value
    const age = this.ageNode.value
    const obj = {
      id: nanoid(),
      name,
      age
    }
    this.props.jiayiren(obj)
    this.nameNode.value = ''
    this.ageNode.value = ''
  }
  render() {
    return (
      <div>
        <h1>上面的count是{this.props.he}</h1>
        我是person组件
        <input
          type="text"
          ref={(c) => (this.nameNode = c)}
          placeholder="请输入名字"
        />
        <input
          type="text"
          ref={(c) => (this.ageNode = c)}
          placeholder="请输入名字"
        />
        <button onClick={this.addPerson}>添加</button>
        <ul>
          {this.props.person.map((item) => {
            return (
              <li key={item.id}>
                {item.name}----{item.age}
              </li>
            )
          })}
        </ul>
      </div>
    )
  }
}

export default connect(
  (state) => ({
    person: state.person,
    he: state.count
  }),
  {
    jiayiren: addPerson
  }
)(Person)
